import React, {Component} from 'react';
import {Button, Row, DatePicker, Tag} from 'antd';
import '../css/register.css';
import {Back, ChooseXhs,ChooseCars} from '../components/EditComponent';
import {config} from "../config";
import moment from 'moment';
import app from '../AppMethod';
import {user} from "../value";

class ConfirmOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roleData: [],
            car_num: '',
            achieve_time: ''
        }
    };

    render() {
        const dateFormat = 'YYYY-MM-DD HH:mm:ss';
        let date = new Date();
        let dateNow = moment(date).format('YYYY-MM-DD HH:mm:ss');
        return (
            <Row className="orderListContainer">
                <div>
                    <Back title="标题" back="true" click={() => this.handleBack()}/>
                </div>
                <div className="orderConfirmContent">
                    <Row className="inputNameContainer1">
                        <div style={{width: '20%', display: 'inline-block', color: '#333333', float: 'left'}}>跟车人</div>
                        <div style={{paddingLeft: '30px', float: 'left', width: '80%'}}>
                            {
                                this.state.roleData.map((item, index) => {
                                    return (
                                        <Tag key={index} closable
                                             onClose={(e) => this.handleDelete(index, e)}>{item.employee_name}</Tag>
                                    )
                                })
                            }
                            <ChooseXhs choose={(data) => this.handleChoose(data)}/>
                        </div>
                    </Row>
                    <Row className="inputNameContainer">
                        <div style={{width: '20%', display: 'inline-block', color: '#333333', float: 'left'}}>车牌号</div>
                        <div style={{paddingLeft: '30px', float: 'left', width: '80%'}}>
                            {
                                this.state.car_num.length>0?
                                <span style={{marginRight:'10px'}}>
                                    {this.state.car_num}
                                </span>:''
                            }
                            <ChooseCars choose={(data) => this.handleChooseCar(data)}/>
                        </div>
                    </Row>
                    <Row className="inputNameContainer">
                        <span style={{width: '20%', display: 'inline-block', color: '#333333'}}>到达时间</span>
                        <span style={{paddingLeft: '30px'}}><DatePicker showTime
                                                                        onChange={(date, dateString) => this.handleTimeChange(date, dateString)}
                                                                        defaultValue={moment(dateNow, dateFormat)}
                                                                        format={dateFormat}/></span>
                    </Row>
                </div>
                <div style={{position: 'absolute', bottom: '10px', width: '100%'}}>
                    <Button type='primary' style={{width: '96%', marginLeft: '2%', height: '45px', fontSize: '18px'}}
                            onClick={() => this.handleDrop('/deliveryOrder')}>确定</Button>
                </div>
            </Row>
        )
    };

    componentDidMount() {
        let date = new Date();
        let dateNow = moment(date).format('YYYY-MM-DD');
        this.setState({achieve_time: dateNow});
    }

    /**
     * 处理提交事件
     * @param path
     * @returns {Promise.<void>}
     */
    async handleDrop(path) {
        let employee_id = app.getData('employee_id');
        let car_no = app.getData('car_no');
        let car_num = this.state.car_num;
        let car_expect_time = this.state.achieve_time;
        let roleData = this.state.roleData;
        if (roleData == null || roleData == undefined || roleData.length <= 0) {
            app.alert('请选择跟车人', 'error', 2);
            return;
        }
        if (car_num == null || car_num == undefined || car_num.length <= 0) {
            app.alert('请选择车牌号', 'error', 2);
            return;
        }
        if (car_expect_time == null || car_expect_time == undefined || car_expect_time.length <= 0) {
            app.alert('请选择到达时间', 'error', 2);
            return;
        }
        let follow_employee_id = '';
        for (let i = 0; i < roleData.length; i++) {
            follow_employee_id = follow_employee_id + roleData[i].employee_id + ',';
        }
        if (follow_employee_id.length >= 0) {
            follow_employee_id = follow_employee_id.substr(0, follow_employee_id.length - 1);
        }
        let data = {};
        data.employee_id = employee_id;
        data.car_no = car_no;
        data.car_num = car_num;
        data.follow_employee_id = follow_employee_id;
        data.car_expect_time = car_expect_time;
        let result = await app.post(user.CONFIRM_SENDCAROUTPUT, data);
        if (result.code === 1) {
            this.props.history.push(config.path + path);
        } else {
            app.alert(result.msg, 'error', 2);
        }

    };

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    };

    /**
     * 获取跟车人数据
     * @param data
     */
    handleChoose(data) {
        this.setState({roleData: data});
    };

    /**
     * 删除跟车人事件
     * @param index
     * @param e
     */
    handleDelete(index, e) {
        e.preventDefault();
        let data = this.state.roleData;
        data.splice(index, 1);
        this.setState({roleData: data});
    };

    /**
     * 处理时间变化事件
     * @param date
     * @param dateString
     */
    handleTimeChange(date, dateString) {
        this.setState({achieve_time: dateString});
    };

    /**
     * 获取车牌号数据
     * @param value
     */
    handleChooseCar(data){
        let car_num=data.vehicle_num;
        this.setState({car_num});
    }
}

export default ConfirmOrder;